<template>
	<div class="newsinfo-container">


		<div v-for="item in newInfoList" :key="newInfoList.id">
			<!--	头部		-->
			<h1 class="title">{{item.title}}</h1>
			<p class="subtitle">
				<span>发表时间:{{item.add_time | dataFormat}}</span>
				<span>点击次数：{{item.click}}</span>
			</p>

			<hr>
			<!--	内容区域	-->
			<div class="content" v-html="item.content"></div>
		</div>
		<!--	评论区域	-->
		<comment :id="id"></comment>
	</div>
</template>

<script>
import comment from "../subcomponents/comment.vue";

export default {
	name: "newInfo.vue",
	data() {
		return {
			id: this.$route.params.id,//将url传递过来的id值，挂在到data上，方便以后调用
			newInfoList: []
		}
	},
	created() {
		this.getNewsInfo();
	},
	methods: {
		getNewsInfo() {
			this.$http.get('api/getnew/' + this.id).then(result => {
				if (result.body.status === 0) {
					this.newInfoList = result.body.message
				} else {
					Toast('获取新闻失败~~');
				}

			})
		}
	},
	components: {
		comment
	}
}
</script>

<style scoped>
	.newsinfo-container {
		padding: 0 4px;
	}

	.title {
		font-size: 16px;
		text-align: center;
		margin: 15px 0;
		color: red;
	}

	.subtitle {
		font-size: 13px;
		color: #226aff;
		display: flex;
		justify-content: space-between;
	}


</style>